<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>文章列表</title>
  <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/iconfont.css">
  <link rel="stylesheet" href="css/main.css">
  <!-- jq -->
  <script src="./libs/jquery-1.12.4.min.js"></script>
  <!-- 模板引擎 -->
  <script src="./libs/template-web.js"></script>
  <!-- 日期插件的js -->
  <script src="./libs/jedate/js/jedate.js"></script>
  <link rel="stylesheet" href="./libs/jedate/css/jeDate-test.css">
  <link rel="stylesheet" href="./libs/jedate/css/jedate.css">

  <!-- 富文本插件js -->
  <script src="./libs/wangEditor/wangEditor.min.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="common_title">
      文章编辑
    </div>
    <div class="container-fluid common_con">
      <form class="form-horizontal article_form" id="form">
        <div class="form-group">
          <label for="inputTitle" class="col-sm-2 control-label">文章标题：</label>
          <div class="col-sm-10">
            <input type="text" name="title" class="form-control title" id="inputTitle" value="文章标题文字">
          </div>
        </div>
        <div class="form-group">
          <label for="inputCover" class="col-sm-2 control-label">文章封面：</label>
          <div class="col-sm-10">
            <img src="images/pic06.jpg" class="article_cover">
            <input name="cover" type="file" id="inputCover">
          </div>
        </div>
        <div class="form-group">
          <label for="inputCategory" class="col-sm-2 control-label">文章类别：</label>
          <div class="col-sm-4">
            <select class="form-control category" name="categoryId">
              <option>类别一</option>
              <option>类别二</option>
              <option>类别三</option>
              <option selected>类别四</option>
              <option>类别五</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">发布时间：</label>
          <div class="col-sm-4 jeinpbox">
            <input type="text" class="jeinput" id="testico" placeholder="YYYY-MM-DD" name="date">
            <div class="icons jebtns"></div>
          </div>
        </div>
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-2 control-label">文章内容：</label>
          <div class="col-sm-10">
            <div id="editor"></div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-success btn-edit">修改</button>
            <button type="submit" class="btn btn-default btn-draft">存为草稿</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>

</html>

<!-- 下拉菜单列表 -->
<script type="text/html" id="tpl-sel">
  {{each}}
  <option value="{{$value.id}}">{{$value.name}}</option>
  {{/each}}
</script>

<script>
  $(function () {
    // http://localhost:8080/api/v1
    // 文件图片预览
    $('#inputCover').on('change', function () {
      $('.article_cover').attr('src', URL.createObjectURL(this.files[0]))
    })


    // 获取文章类别，准备渲染下拉菜单
    $.ajax({
      url: 'http://localhost:8080/api/v1/admin/category/list',
      success(res) {
        if (res.code === 200) $('.category').html(template('tpl-sel', res.data))  // 渲染下拉框
      }
    })

    // 日期插件代码
    $('.jebtns').on('click', function () {
      jeDate("#testico", {
        format: 'YYYY年MM月DD日 hh:mm:ss',
        trigger: false,
        theme: { bgcolor: "#D91600", pnColor: "#FF6653" },
        minDate: '2017-06-16 10:20:25',
        maxDate: '2025-06-16 18:30:35',
        multiPane: false,
        shortcut: [
          { name: "一周", val: { DD: 7 } },
          { name: "一个月", val: { DD: 30 } },
          { name: "二个月", val: { MM: 2 } },
          { name: "三个月", val: { MM: 3 } },
          { name: "一年", val: { DD: 365 } }
        ],
        zIndex: 20000
      });
    })


    // 富文本插件js
    const E = window.wangEditor
    const editor = new E('#editor')
    editor.create()


    // 通过跳转时传递id，edit页面接受并处理，发送ajax，渲染页面
    const id = +window.location.search.split('=')[1]
    $.ajax({
      method: 'get',
      url: 'http://localhost:8080/api/v1/admin/article/search',
      data: { id },
      success(res) {
        console.log(res)
        const { data } = res
        if (res.code === 200) {
          $('#inputTitle').val(data.title)
          $('.article_cover').attr('src', data.cover)
          $('.category').val(data.categoryId)
          $('#testico').val(data.date)
          editor.txt.html(data.content)
        }
      }
    })


    // 点击修改或保存草稿的功能
    $('.form-group button').on('click', function (e) {
      e.preventDefault()
      editData($(this).text().trim() == '修改' ? '已发布' : '草稿')
    })
    //  封装修改数据的函数
    function editData(state) {
      const fd = new FormData($('form')[0])
      fd.set('id', id)
      fd.set('state', state)
      fd.set('content', editor.txt.html())
      $.ajax({
        method: 'post',
        url: 'http://localhost:8080/api/v1/admin/article/edit',
        data: fd,
        contentType:false,
        processData:false,
        success(res) {
          alert(res.msg)
          if (res.code === 200) {
            window.location.href = './article_list.html'
          }
        }
      })
    }
  })
</script>